<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>bootstrap项目实战</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-maizi.css"/>
    <meta http-equiv="X-UA-Compatible" content="IE-Edge">
     <!--初始化移动浏览器显示-->
     <meta name="viewport" content="width-device-width,inital-scale=1">
     <link href="./bootstrap.min.css" rel="stylesheet">
     <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
     <script src="./jquery-3.4.1.min.js"></script>
       <script src="./bootstrap.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               var value = 0;
               var time = 100;
               //进度条复位函数
               function reset( ) {
                 value = 0
                   $("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
                   //setTimeout(increment,5000);
               }
               //百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
               function increment( ) {
                   value += 1;
                   $("#prog").css("width",value + "%").text(value + "%");
                   if (value>=0 && value<=30) {
                       $("#prog").addClass("progress-bar-success");
                   }
                   else if (value>=30 && value <=60) {
                       $("#prog").removeClass("progress-bar-success");
                       $("#prog").addClass("progress-bar-warning");
                   }
                   else if (value>=60 && value <=90) {
                       $("#prog").removeClass("progress-bar-warning");
                       $("#prog").addClass("progress-bar-info");
                   }
                   else if(value >= 90 && value<100) {
                       $("#prog").removeClass("progress-bar-info");
                       $("#prog").addClass("progress-bar-danger");    
                   }
                   else{
                       setTimeout(reset,3000);
                       return;
 
                   }
 
                   st = setTimeout(increment,time);
               }
 
               increment();
               //进度条停止与重新开始
               $("#stop").click(function () {
                   if ("stop" == $("#stop").val()) {
                       //$("#prog").stop();
                       clearTimeout(st);
                       $("#prog").css("width","0%").text("等待启动");
                       $("#stop").val("start").text("重新开始");
                   } else if ("start" == $("#stop").val()) {
                       increment();
                       $("#stop").val("stop").text("停止");                      
                   }
               });
               //进度条暂停与继续
               $("#pause").click(function() {
                   if ("pause" == $("#pause").val()) {
                       //$("#prog").stop();
                       clearTimeout(st);
                       $("#pause").val("goon").text("继续");
                   } else if ("goon" == $("#pause").val()) {
                       increment();
                       $("#pause").val("stop").text("暂停");
                   }
               });
               $("#stop1").click(function () {
                   if ("stop" == $("#stop").val()) {
                       //$("#prog").stop();
                       clearTimeout(st);
                       $("#prog").css("width","100%").text("考试结束");}
                //        $("#stop").val("start").text("重新开始");
                //    } else if ("start" == $("#stop").val()) {
                //        increment();
                //        $("#stop").val("stop").text("停止");                      
                //    }
               });
           });
       </script>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">考试管理系统</a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="index1.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li>
                <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;考试界面</a></li>
                <li><a href="./index4.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;科目选择</a></li>
                <li><a href="./index3.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;考试分析</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{user.name}}同学
        {{loginStatus}}
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dLabel">
                        <li><a href="index.html"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
                        <li><a href="index.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
                        <li><a href="index.html"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
                        <li><a href="index.html"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;账户中心</a></li>
                        <li><a href="index.html"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
                    </ul>
                </li>
                <li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <a href="#" class="list-group-item  active">考试界面</a>
                
            </div>
        </div>
        <div class="col-md-10">
            <div class="page-header">
                <h1>考试界面</h1>
                <!-- 进度条 -->
                <div class="progress progress-striped active">
                    <div id="prog" class="progress-bar" role="progressbar"                                         ia-valuenow=""                                    aria-valuemin="0"                                   aria-valuemax="100" style="width:0%;">
                       <span id="proglabel">正在启动，请稍后......</span>
                   </div>
               </div>    
               
                       <button id="pause" class="btn btn-primary" value="pause">暂停</button>
                       <button id="stop" class="btn btn-primary" value="stop">停止</button>
                       <button id="stop1" class="btn btn-primary" value="stop1">考试结束</button>
                      
                      
            </div>


            <ul class="nav nav-tabs">
                <!-- <li>
                    <a href="user_list.html">用户列表</a>
                </li> -->
                <li  class="active">
                    <a href="#">考卷内容</a>
                </li>
                <!-- <li>
                    <a href="" role="button" data-toggle="modal" data-target="#myModal">添加用户</a>
                </li> -->
            </ul>
            <form action="#" class="uesr_search" id="signinform" name="myform">
                <div class="alert alert-info" role="alert">
                    <strong>时间要求：</strong>
                    请在上面进度条到100%前提交！
                    <strong>成绩：</strong>
                    <strong id="score"></strong>
                </div>
                <div class="form-group">
                    <label for="name">1</label>
                    关于TCP和UDP，以下说法正确的是( )。
                    <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios"  value="a" checked>
                          A) TCP和UDP都是端到端的传输协议
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios"  value="b">
                          B) TCP和UDP都不是端到端的传输协议
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios"  value="c" >
                          C) TCP是端到端的传输协议，UDP不是端到端的传输协议
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios"  value="d" >
                          C) TCP是端到端的传输协议，UDP不是端到端的传输协议
                        </label>
                      </div>
                </div>
                <div class="form-group">
                    <label for="uid">2</label>
                    人类最早的文明出现在（）
                    <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios1"  value="a" checked>
                          A) 古埃及
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios1"  value="b">
                          B)  两河流域的苏美尔
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios1"  value="c" >
                          C)     印度河流域
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios1"  value="d" >
                          D)  爱琴海地区
                        </label>
                      </div>
                </div>
                <div class="form-group">
                    <label for="uid">2</label>
                    西方史学之父是（）
                    <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios2"  value="A" checked>
                          A)  赫卡泰俄斯
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="optionsRadios2"  value="B">
                          B) 希罗多德
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios2"  value="C" >
                          C)    修昔底德
                        </label>
                      </div>
                      <div class="radio ">
                        <label>
                          <input type="radio" name="optionsRadios2"  value="D" >
                          D)  波里比阿
                        </label>
                      </div>
                </div>
                <div class="form-group">
                    <label for="yonghuzu">3</label>
                    <select id="yonghuzu" class="form-control">
                        <option>限制会员</option>
                        <option>新手上路</option>
                        <option>组册会员</option>
                        <option>中级会员</option>
                        <option>高级会员</option>
                    </select>
                </div>
                
                <button type="submit" class="btn btn-default" style="margin: 0 auto;">提交</button>
                
            </form>
        </div>
    </div>
</div>



<!--footer-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;www.baidu.com&nbsp;&nbsp;蜀ICP备13014270号-4
                </p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    const $form =$('#signinform')
        $form.on('submit',(e)=>{
            e.preventDefault()
            //这种适用于input输入账号或密码这种只有一个name的框
            // const name = $form.find('input[name=optionsRadios]').val()
            // 获取指定名称的cookie
function getCookie(name){
    var strcookie = document.cookie;//获取cookie字符串
    var arrcookie = strcookie.split("; ");//分割
    //遍历匹配
    for ( var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == name){
            return arr[1];
        }
    }
    return "";
}           
            let userid =getCookie('user_id')
            console.log(getCookie('user_id'));
            console.log(document.cookie);
            // const password = $form.find('input[name=optionsRadios1]').val();
            let total = 100;
            var optionsRadios = document.myform.optionsRadios;
            let fir;
            //多个name的通过for遍历，检查哪个被选中
            for(var i = 0;i<optionsRadios.length;i++){
             if(optionsRadios[i].checked){
                 fir=optionsRadios[i].value
            
             }
            }
            console.log(fir);
        
            if(fir !== 'b'){
                   total= total-30;
               }
            console.log(total);
            var optionsRadios2 = document.myform.optionsRadios2;
            for(var i = 0;i<optionsRadios2.length;i++){
             if(optionsRadios2[i].checked){
             console.log(optionsRadios2[i].value);
             if(optionsRadios2[i].value !== 'B'){
                   total= total-30;
               }
             }
            }
            console.log(total);
            var optionsRadios1 = document.myform.optionsRadios1;
            for(var i = 0;i<optionsRadios1.length;i++){
             if(optionsRadios1[i].checked){
             console.log(optionsRadios1[i].value);
             if(optionsRadios1[i].value!=='b'){
                   total= total-30;
               };
             }
            }
            console.log(total);
            console.log('456');
            $.ajax({
                method:"POST",
                url:'/score',
                contentType:'text/json;charset=UTF-8',
                data:JSON.stringify({userid,total})
            }).then(()=>{
                alert('提交成功')
                document.getElementById('score').innerText=total
                // location.href='/index1.html'
            },()=>{
               
            })
        })
</script>

</body>
</html>